/*
 * @Author: yangzonglong
 * @Date: 2021-03-01 13:18:46
 * @version: v1.0.0
 * @Descripttion:
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-04 16:41:29
 * @Auditor:
 */
import React, { useMemo } from 'react';

const HOLD = require('../../components/img/hold.svg');
const defStyle = { width: '100%', };

const App = (props) => {
  const { formItemProps, imgProps, } = props;

  const width = formItemProps?.style?.width;
  const height = formItemProps?.style?.height;

  const options = useMemo(() => {
    return { height: height ? height + 'px' : 'auto', width: width ? width + 'px' : 'auto' };
  }, [width, height]);

  const mergeStyle = {
    ...defStyle,
    textAlign: formItemProps?.style?.textAlign
  };

  if (imgProps.printTop) {
    mergeStyle.position = 'absolute';
    mergeStyle.marginTop = imgProps.printTop ? imgProps.printTop + 'px' : 0;
    mergeStyle.marginLeft = imgProps.printLeft ? imgProps.printLeft + 'px' : 0;
  }

  return (
    <div style={mergeStyle}>
      <img
        style={{ ...formItemProps?.style, ...options }}
        alt=""
        src={imgProps?.url || HOLD}
      />
    </div>
  );
};

export default App;
